<template>
	<view class="g_container">
		<view class="g_header">
			<changeOrgs @listData="listData" :bindType="bindType"></changeOrgs>
		</view>
		<view class="g_list">
			<view class="box_item" v-for="(ite, inde) in geList" :key="inde">
				<view class="g_list_item" v-for="(item, index) in ite.students" :key="index">
					<view class="g_list_item_box">
						<view class="gl_head">
							<text class="g_txt g_top_txt">{{item.empName}}的卡账户</text>
							<image @click="changeEye" :src="showEye ? '/static/images/home/eye_icon.png' : '/static/images/home/eye-open.png'" class="eye_size"></image>
						</view>
						
					</view>
					<view v-for="(itemss, indexss) in item.cards" :key="indexss">
						<view class="g_list_item_box g_top_car">
							<text class="g_txt">卡号：{{showEye ? itemss.cardNo : '****'}}</text>
							<text v-if="itemss.orgId != 4501505" class="g_btn" @click="toGuiShi(itemss)" :style="{'background-color': itemss.cardState == 1 ? '#dddddd' : ''}">{{itemss.cardState == 0 ? '挂失' : '已挂失'}}</text>
						</view>
						<view>
							<view v-for="(walletItem, indexs) in itemss.wallets" :key="indexs">
								<text class="g_txt">
									{{walletItem.walletType == 1 ? '现金账户余额' : walletItem.walletType == 3 ? '热水账户余额' : walletItem.walletType == 2 ? '补助账户余额' : ''}}：{{showEye ? walletItem.balance.toFixed(2) : '****'}}
								</text>
							</view>
						</view>
					</view>
					
				</view>
			</view>
			<number-jpan :length="6" @closeChange="closeChange($event)" :showNum="true" ref="numberPad"></number-jpan>
		</view>
		<mcModal :isShow="showMcModal" :content="content" :title="title" @cancel='bb()' :inp="false" @ok='cc()' :okBtn='okBtn'></mcModal>
		<tmcModal :isShow="showMcModal1" :showCancel="false" :content="content1" :title="title1" @cancel="cancel" @ok='queren'></tmcModal>
	</view>
</template>

<script>
	import {reportlost, queryStudentCardBalance, checkPayPwd} from '../../common/api/index.js'
	import numberJpan from "../../components/number/numberJpan/numberJpan.vue";
	import {wx_mini_appid} from '../../common/utils/pay_center.js'
	import {_showLoading, _showToast} from '../../common/js/util.js'
	import changeOrgs from '../../components/changeOrgs.vue'
	import mcModal from '../../components/custom-modal/custom-modal.vue'
	import tmcModal from '../../components/custom-modal/mc-modal.vue'
	export default {
		data() {
			return {
				showPassword: false,
				geList: [],
				obj: {},
				orgId: '',
				bindType: 0,
				showEye: false,
				showMcModal: false,
				content: '',
				title: '',
				okBtn: '',
				showMcModal1: false,
				content1: '',
				title1: ''
			}
		},
		components: {
			numberJpan,
			changeOrgs,
			mcModal,
			tmcModal
		},
		computed: {
			statusToTxt(status) {
				return function(status) {
					if(status == 0) {
						return "正常"
					} else if(status == 1) {
						return "已挂失"
					} else if(status == 2) {
						return "挂失已补办"
					}
				}
			}
		},
		methods: {
			bb() {
				this.showMcModal = false
			},
			cc() {
				this.showMcModal = false
				uni.switchTab({
					url: '/pages/home/home'
				})
			},
			cancel() {
				this.showMcModal1 = false
			},
			queren() {
				this.showMcModal1 = false
			},
			changeEye() {
				this.showEye = !this.showEye
			},
			listData(arr, orgId) {
				this.geList = arr
				this.orgId = orgId
			},
			toGuiShi(item) {
				if(item.cardState == 0) {
					this.$refs.numberPad.open();
					this.obj = item
				} else {
					
				}
			},
			closeChange(num){
				if(num.length == 6) {
					checkPayPwd({
						password: num,
						userId:uni.getStorageSync("s_userId"),
						appId:100
					}).then(res => {
						console.log(res)
						if(res.resultCode == 0) {
							reportlost({
								empId: this.obj.empId,
								cardNo: this.obj.cardNo,
								empName: this.obj.empName,
								orgId: this.obj.orgId,
								xappId: wx_mini_appid,
								// #ifdef H5
								appId: uni.getStorageSync('str3')
								// #endif
								// #ifndef H5
								appId: 100
								// #endif
							}).then(res => {
								if(res.code == 0) {
									this.title = '操作提示'
									this.content = '挂失成功~'
									this.okBtn = '确定'
									this.showMcModal = true
								} else {
									_showToast('挂失失败: '+ res.msg)
								}
							}).catch(err => {
								console.log(err)
							})
						} else {
							this.title1 = '温馨提示'
							this.content1 = res.resultMsg
							this.showMcModal1 = true
						}
					}).catch(err => {
						console.log(err)
					})
				} else {
					_showToast('请输入正确位数的卡密码')
				}
			},
			showPass() {
				this.showPassword = !this.showPassword;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F9F9F9;
		overflow: hidden;
	}
	.g_container {
		.g_header {
		  width: 100vw;
		  height: 390rpx;
		  background-image: url('');
		  background-size: 100%;
		  background-repeat: no-repeat;
		  display: flex;
		  justify-content: center;
		}
		.g_list {
			position: absolute;
			top: 220rpx;
			width: 92%;
			left: 4%;
			box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.09);
			border-radius: 8rpx;
			.box_item {
				margin-bottom: 20rpx;
				background-color: #ffffff;
				.g_list_item {
					padding: 20rpx;
					margin: 16rpx;
					.g_list_item_box {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						line-height: 50rpx;
						.gl_head {
							display: flex;
							flex-direction: row;
							align-items: center;
							.g_top_txt {
								font-size: 32rpx;
								font-family: "PingFangSC-Heavy, PingFang SC";
								font-weight: 600;
								color: #333333;
							}
							.eye_size {
								width: 20px;
								height: 20px;
								margin-left: 14rpx;
							}
						}
						.g_btn {
							font-size: 28rpx;
							font-family: "PingFang-SC-Medium, PingFang-SC";
							font-weight: 500;
							color: #185AFF;
							border-radius: 26rpx;
							line-height: 52rpx;
							border: 1px solid #185AFF;
							padding: 0 30rpx;
						}
					}
					.g_top_car {
						margin-top: 10rpx;
					}
				}
			}
		}
	}
	.g_txt {
		font-size: 28rpx;
		font-family: "PingFangSC-Medium, PingFang SC";
		font-weight: 500;
		color: #6B707A;
	}
	.box_item:last-child {
		margin-bottom: 0;
	}
</style>
